import React from 'react';
import { Image, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import Navbar from '@/components/Navbar';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useRouter } from 'expo-router';
import { petData } from '@/mock/mockjs';
import { usePayContext } from '@/app/AppContext'

export default function Daily() {
  const router = useRouter();
  const { list2, setList2, setList2_one } = usePayContext();
  // 检查 list2 是否为 undefined
  if (!list2) {
    return <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ThemedText>加载中...</ThemedText>
    </ThemedView>;
  }

  // 设置默认值
  setList2(petData.list || []);
  // console.log('====================================');
  // console.log(petData.list,'list2');
  // console.log('====================================');
  return (
    <ThemedView style={{ flex: 1 }}>
      <Navbar title="特惠抢购" />
      <ScrollView>
        <ThemedView style={styles.list}>
          {list2 && list2.length > 0 ? (
            list2.map((item: any) => {
              return (
                <TouchableOpacity
                  key={item.id}
                  onPress={() => {
                    router.push({
                      pathname: '/home/detail',
                    });
                    setList2_one(item);
                    
                  }}
                >
                  <ThemedView style={styles.div}>
                    <Image
                      source={{ uri: item.url }}
                      style={{ width: '100%', height: '70%' }}
                    />
                    <ThemedText style={{ textAlign: 'center', marginTop: 5 }}>
                      {item.breed} ￥{item.price}
                    </ThemedText>
                    <ThemedText style={{ textAlign: 'center', marginTop: 5 }}>
                      {item.province} {item.city}
                    </ThemedText>
                  </ThemedView>
                </TouchableOpacity>
              );
            })
          ) : (
            <ThemedText style={{ textAlign: 'center', marginTop: 20 }}>暂无数据</ThemedText>
          )}
        </ThemedView>
      </ScrollView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  list: {
    width: '100%',
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  div: {
    width: 170,
    height: 200,
    backgroundColor: 'pink',
    borderRadius: 10,
    overflow: 'hidden',
    margin: 5,
  },
});